<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.red {color:red;}
			
			.blue {color:blue;}
			
			.active {letter-spacing: 2em;}
		</style>
	</head>
	<body>
		<div id="app">
			<!--数组-->
			<p v-bind:class="['red']">
				{{msg}}
			</p>
			<p v-bind:class="classlist">
				王子元真棒！
			</p>
			<!--三元表达式-->
			<p v-bind:class="['red',isshow?'active':'']">
				王子元真棒！
			</p>
			<!--数组中嵌套对象-->
			<p v-bind:class="['blue',{'active':true}]">
				王子元真棒！
			</p>
			<!--对象-->
			<p v-bind:class="[objclass,objclass1]">
				王子元真棒！
			</p>
			<button type="button" v-on:click="clickbtn">点我！</button>
		</div>
		<script>
			var vue = new Vue({
				el:'#app',
				data:{
					msg:'王子元真好看！',
					classlist:['blue'],
					objclass:{'red':false,'blue':true},
					objclass1:{'active':false},
					isshow:true
				},
				methods:{
					clickbtn:function(){
						this.isshow = !this.isshow;
					}
				}
			})
		</script>
	</body>
</html>
